<template>
  <div class="root-cause-container">
    <el-row :gutter="20" class="analysis-section">
      <el-card class="vulnerability-card" style="width: 100%">
        <template #header>
          <div class="card-header">
            <span>漏洞选择</span>
            <el-tooltip content="选择需要进行成因分析的漏洞" placement="top">
              <el-icon><QuestionFilled /></el-icon>
            </el-tooltip>
          </div>
        </template>
        
        <!-- 新的下拉搜索组件 -->
        <div class="search-dropdown-container">
          <div class="search-input-wrapper" :class="{ 'is-focus': isSearchFocused }">
            <el-input 
              ref="searchInputRef"
              v-model="rec.title" 
              placeholder="搜索漏洞名称" 
              clearable 
              @focus="handleSearchFocus"
              @blur="handleSearchBlur"
              @clear="handleSearchClear"
              @input="handleSearchInput">
              <template #suffix>
                <el-icon class="search-icon" :class="{ 'rotate': isSearching }">
                  <Search v-if="!isSearching" />
                  <Loading v-else />
                </el-icon>
              </template>
            </el-input>
            
            <!-- 下拉搜索结果 -->
            <div 
              v-show="showDropdown && (rec.list.length > 0 || isSearching)" 
              class="search-dropdown">
              <div class="dropdown-content" @scroll="handleDropdownScroll">
                <div 
                  v-for="item in rec.list" 
                  :key="item.id" 
                  class="dropdown-item" 
                  :class="{ 'is-selected': rec.checkedId === item.id }"
                  @mousedown.prevent="selectVulnerability(item)">
                  <div class="item-content">
                    <div class="item-title">
                      <span v-html="highlightMatch(item.title, rec.title)"></span>
                      <el-tag :type="getTagType(item.level)" size="small">{{ formatLevel(item.level) }}</el-tag>
                    </div>
                    <div class="item-meta">
                      <span class="item-id">ID: {{ item.id }}</span>
                      <span class="item-type">{{ item.vuln_type }}</span>
                    </div>
                  </div>
                </div>
                
                <!-- 加载更多指示器 -->
                <div v-if="isLoadingMore" class="loading-more-item">
                  <el-icon class="is-loading"><Loading /></el-icon>
                  <span>加载更多...</span>
                </div>
                
                <!-- 无更多数据提示 -->
                <div v-if="!hasMore && rec.list.length > 0" class="no-more-item">
                  没有更多数据了
                </div>
                
                <!-- 无搜索结果 -->
                <div v-if="rec.list.length === 0 && !isSearching && rec.title" class="no-result-item">
                  <el-icon><Search /></el-icon>
                  <span>未找到匹配的漏洞</span>
                </div>
              </div>
            </div>
          </div>
          
          <!-- 已选择的漏洞显示 -->
          <div v-if="rec.checkedId && selectedVulnerability" class="selected-vuln-display">
            <div class="selected-label">已选择:</div>
            <div class="selected-content">
              <span class="selected-title">{{ selectedVulnerability.title }}</span>
              <el-tag :type="getTagType(selectedVulnerability.level)" size="small">
                {{ formatLevel(selectedVulnerability.level) }}
              </el-tag>
              <el-button 
                type="danger" 
                text 
                size="small" 
                @click="clearSelection"
                style="margin-left: 8px;">
                <el-icon><Close /></el-icon>
              </el-button>
            </div>
          </div>
        </div>
      </el-card>
    </el-row>
    <!-- 漏洞选择和分析表单 -->
    <el-row :gutter="20" class="analysis-section" style="margin-top: 10px;">
      <el-col :span="8">
        <el-card class="vulnerability-card">
          <template #header>
            <div class="card-header">
              <span>漏洞任务列表</span>
            </div>
          </template>
          <!-- 添加搜索输入框 -->
          <div class="search-input-wrapper" :class="{ 'is-focus': isTaskSearchFocused }">
            <el-input 
              v-model="taskSearchTitle"
              placeholder="搜索任务名称"
              clearable 
              @clear="getTaskListFn()"
              @input="getTaskListFn()">
              <template #suffix>
                <el-icon class="search-icon" :class="{ 'rotate': isTaskSearching }">
                  <Search v-if="!isTaskSearching" />
                  <Loading v-else />
                </el-icon>
              </template>
            </el-input>
          </div>
          <div class="scrollBox" @scroll="handleScroll" :style="{ height: taskListHeight + 'px !important'}">
            <div 
              v-for="item in rec.vulnList" 
              :key="item.id" 
              class="vuln-item" 
              :class="{ active: rec.checkedId === item.id }"
              @click="selectTask(item)">
              <div class="vuln-title">
                <span>{{ item.title }}</span>
                <!-- <el-tag :type="getTagType(item.level)" size="small">{{ formatLevel(item.level) }}</el-tag> -->
              </div>
            </div>
            <div v-if="isLoadingMoreTask" class="loading-more">
              <el-icon class="is-loading"><Loading /></el-icon>
              <span>加载更多...</span>
            </div>
            <div v-if="!hasMoreTask && rec.vulnList.length > 0" class="no-more">
              没有更多数据了
            </div>
          </div>
        </el-card>
      </el-col>
      
      <el-col :span="16">
        <el-card class="analysis-card" v-loading="loading">
          <template #header>
            <div class="card-header">
              <span>漏洞详情</span>
              <div v-if="rec.checkedId">
                <el-tag type="info">{{ rec.checkedId }}</el-tag>
              </div>
            </div>
          </template>
          
          <el-empty v-if="!rec.checkedId" description="请先选择一个漏洞进行分析">
            <template #image>
              <el-icon class="empty-icon"><Select /></el-icon>
            </template>
          </el-empty>

          <div v-if="rec.isMatching && rec.checkedId">
            <div class="progress-info">正在进行漏洞分析...</div>
            <el-progress :percentage="rec.matchingProgress" :stroke-width="8" />
          </div>
          
          <template v-if="rec.checkedId && !rec.isMatching">
            <!-- <el-tabs v-model="activeTab" style="height: 500px;"> -->
              <!-- <el-tab-pane name="details"> -->
                <div :style="{ height: detailHeight + 'px', overflowY: 'auto' }">
                <el-descriptions :column="2" border>
                  <el-descriptions-item label="漏洞名称">{{ selectedVulnerability.title }}</el-descriptions-item>
                  <el-descriptions-item label="CVE编号">{{ selectedVulnerability.cve_id || '未分配' }}</el-descriptions-item>
                  <el-descriptions-item label="漏洞类型">{{ selectedVulnerability.vuln_type }}</el-descriptions-item>
                  <el-descriptions-item label="危害等级">
                    <el-tag :type="getTagType(selectedVulnerability.level)">{{ formatLevel(selectedVulnerability.level) }}</el-tag>
                  </el-descriptions-item>
                  <el-descriptions-item label="发布日期">{{ selectedVulnerability.publish_time }}</el-descriptions-item>
                  <el-descriptions-item label="影响范围">{{ selectedVulnerability.score || '未指定' }}</el-descriptions-item>
                  <el-descriptions-item label="漏洞描述" :span="2">
                    {{ selectedVulnerability.description }}
                  </el-descriptions-item>
                </el-descriptions>
                
                <div class="details-section" v-if="rec.bigDataAnalysis?.cause_match">
                  <div class="section-title">漏洞成因分析</div>
                  <div class="section-content">{{ rec.bigDataAnalysis?.cause_match }}</div>
                </div>
                
                <div class="code-section" v-if="rec.bigDataAnalysis?.code_match">
                  <div class="section-title">漏洞代码片段</div>
                  <el-card shadow="never" class="code-card">
                    <pre><code>{{ rec.bigDataAnalysis?.code_match }}</code></pre>
                  </el-card>
                </div>

                <div class="details-section" v-if="rec.bigDataAnalysis?.mechanism_match">
                  <div class="section-title">漏洞机理分析</div>
                  <div class="section-content">{{ rec.bigDataAnalysis?.mechanism_match }}</div>
                </div>

                <div class="details-section" v-if="rec.bigDataAnalysis?.impact_match">
                  <div class="section-title">漏洞影响分析</div>
                  <div class="section-content">{{ rec.bigDataAnalysis?.impact_match }}</div>
                </div>
                
              <!-- </el-tab-pane> -->
              
              <!-- <el-tab-pane label="成因分析" name="analysis">
                <div class="analysis-form">
                  <el-form :model="analysisForm" label-position="top" :disabled="!isAnalyzing">
                    <el-form-item label="成因类型">
                      <el-select v-model="analysisForm.rootCauseType" placeholder="选择成因类型" class="w-full">
                        <el-option label="代码实现缺陷" value="code_defect" />
                        <el-option label="设计缺陷" value="design_defect" />
                        <el-option label="配置错误" value="config_error" />
                        <el-option label="第三方组件缺陷" value="third_party_defect" />
                        <el-option label="业务逻辑缺陷" value="logic_defect" />
                        <el-option label="其他" value="other" />
                      </el-select>
                    </el-form-item>
                    <el-form-item label="CWE编号">
                      <el-input v-model="analysisForm.cweId" placeholder="例如：CWE-79" />
                    </el-form-item>
                    <el-form-item label="成因分析报告">
                      <el-input 
                        v-model="analysisForm.report" 
                        type="textarea" 
                        :rows="8" 
                        placeholder="请详细分析漏洞的成因，包括技术路径和触发条件" />
                    </el-form-item>
                    <el-form-item label="可利用性评估">
                      <el-rate
                        v-model="analysisForm.exploitability"
                        :max="5"
                        :texts="['非常困难', '困难', '一般', '容易', '非常容易']"
                        show-text />
                    </el-form-item>
                    <el-form-item label="漏洞根源代码行">
                      <el-input 
                        v-model="analysisForm.sourceCodeLocation" 
                        placeholder="例如：src/main.js:42-50" />
                    </el-form-item>
                    <el-form-item label="修复难度评估">
                      <el-radio-group v-model="analysisForm.fixDifficulty">
                        <el-radio label="low">简单修复</el-radio>
                        <el-radio label="medium">中等难度</el-radio>
                        <el-radio label="high">复杂修复</el-radio>
                      </el-radio-group>
                    </el-form-item>
                  </el-form>
                </div>
              </el-tab-pane> -->
              
              <!-- <el-tab-pane label="历史分析记录" name="history">
                <div class="history-section" v-if="analysisHistory.length">
                  <div 
                    v-for="(record, index) in analysisHistory" 
                    :key="index" 
                    class="history-record">
                    <div class="record-header">
                      <div class="record-title">
                        <el-tag size="small">{{ formatRootCauseType(record.rootCauseType) }}</el-tag>
                        <span>{{ record.date }}</span>
                      </div>
                      <div class="record-author">分析人员: {{ record.analyst }}</div>
                    </div>
                    <div class="record-content">{{ record.report }}</div>
                  </div>
                </div>
                <el-empty v-else description="暂无历史分析记录" />
              </el-tab-pane> -->
            <!-- </el-tabs> -->
             </div>
          </template>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
import { ref, reactive, computed, onMounted, onUnmounted } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { QuestionFilled, Search, Select, Loading, Close } from '@element-plus/icons-vue'
import debounce from 'lodash/debounce';
import {
  getVulnerabilityList,
  getVulnAnalysis,
  createVulnTask,
  getTaskList,
} from "@/api/vulnerability";

// 状态变量
const loading = ref(false)
const selectedVulnerability = ref(null)
const activeTab = ref('details')
const isAnalyzing = ref(false)
const page = ref(1)
const page_task = ref(1)
const limit = ref(10)
const limit_task = ref(10)
const hasMore = ref(true)  // 是否还有更多数据
const hasMoreTask = ref(true)  // 是否还有更多数据
const isLoadingMore = ref(false)  // 是否正在加载更多
const isLoadingMoreTask = ref(false)  // 是否正在加载更多

// 动态高度相关
const taskListHeight = ref(0)
const detailHeight = ref(0)

const calculateHeights = () => {
  // 计算其他元素高度
  const header = document.querySelector('.page-header')
  const headerHeight = header ? header.offsetHeight : 0
  
  // 卡片头部高度（估算）
  const cardHeaderHeight = 40
  
  // 间距和边距（估算）
  const spacing = 100
  
  // 可用高度
  const totalAvailableHeight = window.innerHeight - headerHeight - (cardHeaderHeight * 2) - spacing - 20
  
  // 平均分配高度给两个模块
  const moduleHeight = totalAvailableHeight / 1.5
  
  taskListHeight.value = moduleHeight
  detailHeight.value = moduleHeight
}

onMounted(() => {
  calculateHeights()
  window.addEventListener('resize', calculateHeights)
})

// onUnmounted(() => {
//   window.removeEventListener('resize', calculateHeights)
// })

// 搜索下拉相关状态
const isSearchFocused = ref(false)
const showDropdown = ref(false)
const isSearching = ref(false)
const isTaskSearching = ref(false)
const searchInputRef = ref(null)
const searchDebounceTimer = ref(null)
const taskSearchTitle = ref('')

const rec = reactive({
  vulnList: [],
  list: [],
  title: '',
  checkedId: 0,
  bigDataAnalysis: {},
  isMatching: false,
  matchingProgress: 0
})

// 分析表单
const analysisForm = reactive({
  rootCauseType: '',
  cweId: '',
  report: '',
  exploitability: 3,
  sourceCodeLocation: '',
  fixDifficulty: 'medium'
})

// 历史分析记录
const analysisHistory = ref([])

// 格式化危害等级
const formatLevel = (level) => {
  const levelMap = {
    'critical': '严重',
    'high': '高危',
    'medium': '中危',
    'low': '低危'
  }
  return levelMap[level] || level
}

// 获取标签类型
const getTagType = (level) => {
  const typeMap = {
    '严重': 'danger',
    '高': 'warning',
    '中': '',
    '低': 'info'
  }
  return typeMap[level] || ''
}

// 格式化成因类型
const formatRootCauseType = (type) => {
  const typeMap = {
    'code_defect': '代码实现缺陷',
    'design_defect': '设计缺陷',
    'config_error': '配置错误',
    'third_party_defect': '第三方组件缺陷',
    'logic_defect': '业务逻辑缺陷',
    'other': '其他'
  }
  return typeMap[type] || type
}

// 搜索焦点处理
const handleSearchFocus = () => {
  isSearchFocused.value = true
  showDropdown.value = true
  // 如果没有数据且没有搜索词，则加载初始数据
  if (rec.list.length === 0 && !rec.title) {
    fetchData()
  }
}

const handleSearchBlur = () => {
  // 延迟隐藏下拉框，允许点击事件完成
  setTimeout(() => {
    isSearchFocused.value = false
    showDropdown.value = false
  }, 200)
}

const handleSearchClear = () => {
  rec.title = ''
  rec.list = []
  page.value = 1
  hasMore.value = true
  showDropdown.value = false
}

// 处理搜索输入 - 添加防抖
const handleSearchInput = () => {
  if (searchDebounceTimer.value) {
    clearTimeout(searchDebounceTimer.value)
  }
  
  searchDebounceTimer.value = setTimeout(() => {
    showDropdown.value = true
    fetchData()
  }, 300) // 300ms 防抖
}

// 下拉框滚动事件
const handleDropdownScroll = (e) => {
  const target = e.target
  const { scrollTop, scrollHeight, clientHeight } = target
  // 当滚动到距离底部20px时触发加载
  if (scrollHeight - scrollTop - clientHeight < 20 && !isLoadingMore.value && hasMore.value) {
    loadMore()
  }
}

// 加载更多数据
const loadMore = debounce(async () => {
  if (isLoadingMore.value || !hasMore.value) return
  
  isLoadingMore.value = true
  page.value++
  
  try {
    const params = {
      page_index: page.value,
      page_size: limit.value,
      title: rec.title
    }
    
    const res = await getVulnerabilityList(params)
    const newList = res.data || []
    
    if (newList.length < limit.value) {
      hasMore.value = false
    }
    
    rec.list = [...rec.list, ...newList]
  } catch (error) {
    isLoadingMore.value = false
    page.value-- // 加载失败时回退页码
  } finally {
    isLoadingMore.value = false
  }
}, 300)

// 获取列表数据
const fetchData = async () => {
  try {
    isSearching.value = true
    page.value = 1 // 重置页码
    hasMore.value = true // 重置加载状态
    
    const params = {
      page_index: page.value,
      page_size: limit.value,
      title: rec.title
    }

    const res = await getVulnerabilityList(params)
    rec.list = res.data || []
    
    // 判断是否还有更多数据
    if (rec.list.length < limit.value) {
      hasMore.value = false
    }
  } catch (error) {
    console.error("获取漏洞列表失败:", error)
    ElMessage.error("获取漏洞列表失败")
  } finally {
    isSearching.value = false
  }
}

// 高亮搜索匹配文本
const highlightMatch = (text, searchText) => {
  if (!searchText || !text) return text
  
  const regex = new RegExp(`(${searchText.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')})`, 'gi')
  return text.replace(regex, '<mark class="search-highlight">$1</mark>')
}

// 清除选择
const clearSelection = () => {
  rec.checkedId = 0
  selectedVulnerability.value = null
  rec.bigDataAnalysis = {}
}

// 任务列表滚动加载更多
const handleScroll = (e) => {
  const target = e.target
  const { scrollTop, scrollHeight, clientHeight } = target
  // 距底20px时加载
  if (scrollHeight - scrollTop - clientHeight < 20 && !isLoadingMoreTask.value && hasMoreTask.value) {
    loadMoreTask()
  }
}
// 加载更多任务
const loadMoreTask =  debounce(async () => {
  if (isLoadingMoreTask.value || !hasMoreTask.value) return
  isLoadingMoreTask.value = true
  page_task.value++
  try {
    const params = {
      page_index: page_task.value,
      page_size: limit_task.value,
      title: rec.title
    }
    const res = await getTaskList(params)
    const newList = res.data || []
    if (newList.length < limit_task.value) {
      hasMoreTask.value = false
    }
    rec.vulnList = [...rec.vulnList, ...newList]
  } catch (error) {
    isLoadingMoreTask.value = false
    page_task.value--
  } finally {
    isLoadingMoreTask.value = false
  }
}, 300)
const getTaskListFn = async () => {
  isTaskSearching.value = true; // 开始搜索，显示加载状态
  try {
    page_task.value = 1
    hasMoreTask.value = true
    isLoadingMoreTask.value = false
    const params = {
      page_index: page_task.value,
      page_size: limit_task.value,
      title: taskSearchTitle.value
    }
    const res = await getTaskList(params)
    if (res.code === 200) {
      rec.vulnList = res.data
      if (res.data.length < limit_task.value) {
        hasMoreTask.value = false
      }
      if (res.data.length > 0) {
        const first = res.data[0]
        rec.checkedId = first.id
        selectedVulnerability.value = first
        rec.bigDataAnalysis = { ...first, ...first.res }
      } else {
        rec.checkedId = 0
        selectedVulnerability.value = null
        rec.bigDataAnalysis = {}
      }
    }
  } catch (error) {
    console.error('获取任务列表失败:', error)
    ElMessage.error('获取任务列表失败')
  } finally {
    isTaskSearching.value = false; // 搜索完成，隐藏加载状态
  }
}

// 选择漏洞
const selectVulnerability = (vuln) => {
  // 先设置选择状态
  rec.checkedId = vuln.id
  selectedVulnerability.value = vuln
  showDropdown.value = false
  
  ElMessageBox.confirm(
    '是否确认创建分析任务？',
    '确认',
    {
      confirmButtonText: '确认',
      cancelButtonText: '取消',
      type: 'warning',
    }
  ).then(async () => {
    const data = {
      vuln_id: vuln.id,
    }
    const res = await createVulnTask(data)
    if (res.code === 200) {
      ElMessage.success('任务创建成功')
      // 可以在这里添加其他成功后的逻辑
    } else {
      ElMessage.error(res.msg || '任务创建失败')
    }
  }).catch(() => {
    ElMessage.info('已取消创建任务');
    // 如果取消，可以选择是否清除选择
    // clearSelection()
  });
}

const selectTask = (vuln) => {
  rec.bigDataAnalysis = {}
  rec.checkedId = vuln.id;
  selectedVulnerability.value = vuln;
  rec.isMatching = true;
  activeTab.value = 'details';
  rec.bigDataAnalysis = {...vuln, ...vuln.res}
  rec.isMatching = false;
}

// 开始分析
const startAnalysis = () => {
  if (!selectedVulnerability.value) {
    ElMessage.warning('请先选择一个漏洞进行分析')
    return
  }
  
  isAnalyzing.value = true
  activeTab.value = 'analysis'
  
  // 清空表单
  Object.keys(analysisForm).forEach(key => {
    if (key === 'exploitability') {
      analysisForm[key] = 3
    } else if (key === 'fixDifficulty') {
      analysisForm[key] = 'medium'
    } else {
      analysisForm[key] = ''
    }
  })
}

// 保存分析
const saveAnalysis = () => {
  if (!analysisForm.rootCauseType || !analysisForm.report) {
    ElMessage.warning('请完善分析报告内容')
    return
  }
  
  // 模拟API保存调用
  loading.value = true
  setTimeout(() => {
    loading.value = false
    isAnalyzing.value = false
    
    // 添加到历史记录（实际应该通过API重新获取）
    analysisHistory.value.unshift({
      rootCauseType: analysisForm.rootCauseType,
      date: new Date().toLocaleString(),
      analyst: '当前用户',
      report: analysisForm.report
    })
    
    ElMessage.success('漏洞成因分析已保存')
    activeTab.value = 'history'
  }, 1000)
}

// 取消分析
const cancelAnalysis = () => {
  ElMessageBox.confirm('确定要取消当前分析？未保存的内容将会丢失。', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    isAnalyzing.value = false
    activeTab.value = 'details'
  }).catch(() => {})
}

// 初始化
onMounted(() => {
  // 不自动加载漏洞列表，等用户点击搜索框时再加载
  getTaskListFn();
})
</script>

<style lang="scss" scoped>
.root-cause-container {
  padding: 20px;
  
  ::v-deep .el-tabs__content {
    overflow: auto;
  }
  .page-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    
    .page-title {
      font-size: 20px;
      font-weight: bold;
      color: var(--text-color);
    }
    
    .page-actions {
      display: flex;
      gap: 10px;
    }
  }

  :deep(.selected-vuln-display) {
    display:none;
  }

  .analysis-section {
    display: flex;
    justify-content: space-between;

    .vulnerability-card {
      overflow: visible;
    }
    .vulnerability-card, .analysis-card {
      height: 100%;
      
      .card-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-weight: bold;
      }
    }
    :deep(.el-col) {
      padding: 0 !important;
    }
    // 搜索下拉组件样式
    .search-dropdown-container {
      position: relative;
      margin-bottom: 20px;
      
      .search-input-wrapper {
        position: relative;
        
        &.is-focus {
          .search-icon {
            color: var(--el-color-primary);
          }
        }
        
        .search-icon {
          transition: all 0.3s ease;
          
          &.rotate {
            animation: rotate 1s linear infinite;
          }
        }
        
        .search-dropdown {
          position: absolute;
          top: 100%;
          left: 0;
          right: 0;
          z-index: 9999; // 提高层级，防止被遮挡
          background: var(--el-bg-color);
          border: 1px solid var(--el-border-color);
          border-radius: 6px;
          box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
          max-height: 400px;
          overflow: hidden;
          margin-top: 4px;
          
          .dropdown-content {
            max-height: 400px;
            overflow-y: auto;
            
            &::-webkit-scrollbar {
              width: 6px;
            }
            
            &::-webkit-scrollbar-thumb {
              background-color: var(--el-border-color);
              border-radius: 3px;
              
              &:hover {
                background-color: var(--el-border-color-darker);
              }
            }
            
            &::-webkit-scrollbar-track {
              background-color: var(--el-fill-color-light);
            }
          }
          
          .dropdown-item {
            padding: 12px 16px;
            border-bottom: 1px solid var(--el-border-color-lighter);
            cursor: pointer;
            transition: all 0.2s ease;
            
            &:last-child {
              border-bottom: none;
            }
            
            &:hover {
              background-color: var(--el-fill-color-light);
            }
            
            &.is-selected {
              background-color: var(--el-color-primary-light-9);
              border-left: 3px solid var(--el-color-primary);
            }
            
            .item-content {
              .item-title {
                display: flex;
                justify-content: space-between;
                align-items: center;
                margin-bottom: 6px;
                font-weight: 500;
                
                span {
                  flex: 1;
                  margin-right: 8px;
                  word-break: break-all;
                }
              }
              
              .item-meta {
                display: flex;
                gap: 12px;
                font-size: 12px;
                color: var(--el-text-color-secondary);
                
                .item-id, .item-type {
                  flex-shrink: 0;
                }
              }
            }
          }
          
          .loading-more-item, .no-more-item, .no-result-item {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            padding: 16px;
            color: var(--el-text-color-secondary);
            font-size: 14px;
            
            .el-icon {
              font-size: 16px;
            }
          }
          
          .no-result-item {
            color: var(--el-text-color-placeholder);
          }
        }
      }
      
      // 已选择的漏洞显示
      .selected-vuln-display {
        margin-top: 12px;
        padding: 12px;
        background-color: var(--el-fill-color-light);
        border-radius: 6px;
        border: 1px solid var(--el-border-color-lighter);
        
        .selected-label {
          font-size: 12px;
          color: var(--el-text-color-secondary);
          margin-bottom: 6px;
        }
        
        .selected-content {
          display: flex;
          align-items: center;
          gap: 8px;
          
          .selected-title {
            flex: 1;
            font-weight: 500;
            word-break: break-all;
          }
        }
      }
    }

    .scrollBox {
      height: 500px;
      overflow-y: auto;
      padding-right: 10px;
      
      &::-webkit-scrollbar {
        width: 6px;
      }
      
      &::-webkit-scrollbar-thumb {
        background-color: var(--el-border-color);
        border-radius: 3px;
      }
      
      &::-webkit-scrollbar-track {
        background-color: var(--el-border-color-lighter);
      }
    }
    
    .vuln-item {
      padding: 12px;
      border-bottom: 1px solid var(--border-color-light);
      cursor: pointer;
      transition: background-color 0.3s;
      
      &:hover {
        background-color: var(--hover-bg);
      }
      
      &.active {
        background-color: var(--hover-bg);
        border-left: 3px solid var(--primary-color);
      }
      
      .vuln-title {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 5px;
      }
      
      .vuln-id {
        font-size: 12px;
        color: var(--text-color-secondary);
      }
    }
    
    .details-section, .code-section {
      margin-top: 20px;
      
      .section-title {
        font-weight: bold;
        margin-bottom: 10px;
        color: var(--text-color);
      }
      
      .section-content {
        line-height: 1.6;
      }
    }
    
    .code-section {
      margin-top: 15px;

      .section-title {
        font-weight: bold;
        margin-bottom: 10px;
      }
      
      .code-card {
        background-color: var(--bg-color-secondary);
        pre {
          margin: 0;
          padding: 10px;
          overflow-x: auto;
          color: var(--text-color);
          code {
            font-family: monospace;
            color: inherit;
          }
        }
      }
    }
    
    .analysis-form {
      .w-full {
        width: 100%;
      }
    }
    
    .history-section {
      .history-record {
        padding: 15px;
        border: 1px solid var(--border-color);
        border-radius: 4px;
        margin-bottom: 15px;
        
        .record-header {
          display: flex;
          justify-content: space-between;
          align-items: center;
          margin-bottom: 10px;
          
          .record-title {
            span {
              margin-left: 10px;
              font-size: 12px;
              color: var(--text-color-secondary);
            }
          }
          
          .record-author {
            font-size: 13px;
            color: var(--text-color-secondary);
          }
        }
        
        .record-content {
          line-height: 1.6;
          white-space: pre-line;
        }
      }
    }
  }
  
  .empty-icon {
    font-size: 60px;
    color: var(--text-color-secondary);
  }
  
  .loading-more, .no-more {
    text-align: center;
    padding: 10px;
    color: var(--text-color-secondary);
  }
}

// 全局样式
:deep(.search-highlight) {
  background-color: var(--el-color-warning-light-7);
  color: var(--el-color-warning-dark-2);
  padding: 1px 2px;
  border-radius: 2px;
  font-weight: 500;
}

@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
</style>